<template>
  <div id="app">
    <p>
      <!-- router-link-exact-active表示选中时的类名 -->
      <!-- tag属性可以切换router-link的标签类型 -->
      <router-link to="/home">首页</router-link> |
      <router-link to="/about">关于页</router-link> |
      <router-link to="/mine">我的页</router-link> |
      <router-link to="/detail/899">详情页</router-link>
    </p>
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
a {
  color: #2c3e50;
}
a.router-link-exact-active {
  color: #42b983;
}
</style>
